<template>
  <div>
    <!-- 虚线 -->
    <van-divider :style="obj" :hairline="false">{{ title }}</van-divider>
    <div class="box">
      <div v-for="(item, index) in rightArr" :key="index" class="imgBox">
        <img :src="item.wap_banner_url" alt="" />
        <p>
          {{ item.name }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CategoryList",
  props: ["rightArr","title"],
  data() {
    return {
      obj: {
        fontSize: "18px",
      },
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
  .imgBox {
    width: 80px;
    height: 60px;
    margin: 20px 5px ;
    // background:chartreuse;
    img {
      width: 28px;
      height: 28px;
      margin-left:50% ;
      transform: translateX(-50%);
      margin-bottom: 8px;
    }
    p{
      text-align: center;
    }
  }
}
</style>